import { Table,Modal,message } from 'antd';
import React, { useState, useEffect } from 'react';
const { Column, ColumnGroup } = Table;

import { history  } from 'umi';
import { planListpageFn, planListSelectedFn, test,deletePlan } from '@/apis/advert';

export default function plan(props:any) {
  const [data, setData] = useState([]);
  const [modelStutas,setModelStatus] = useState(false)
  const [id,setId] = useState('0')
  const [planName,setPlanName] = useState('')
  
  // 被暂停状态
  const shineUpon: any = {
    suspended_creative_shelves: '创意被下架',
    suspended_insufficient_account_balance: '账户余额不足',
    suspended_advertising_creativity: '广告创意暂停',
    suspended_reach_the_plan_day_budget: '达到推广计划日预算',
    suspended_reach_account_day_budget: '达到账户日预算',
    suspended_reach_the_advertising_day_budget: '达到广告日预算',
  };
  useEffect(() => {
   
    planListpageFn({ entity: {} }).then((res: any) => {
      setData(res.rows);
    });
  }, []);

  function statusFn(item: any) {
    if (+item.status === 2) {
      return <span>已删除</span>;
    } else {
      switch (item.putStatus) {
        case 'PUTTING':
          return <span>正常</span>;
        case 'END':
          return <span>已结束</span>;
        default:
          return (
            <span>
              {'被暂停' +
                `${item.putStatusChild ? ' - ' : ''}` +
                `${item.putStatusChild ? shineUpon[item.putStatusChild] : ''}`}
            </span>
          );
      }
    }
  }

  function edit(id:string):any{
    history.push(`/editPlan?id=${id}`)
  }

  function del(id:string,planName:string){
    setModelStatus(true)
    setId(id)
    setPlanName(planName)
   
  }

  function handleOk(){
    deletePlan(id).then(res=>{
      message.success('删除成功');
      setModelStatus(false)
    })
  }

  return (
    <div>
      <Table dataSource={data} bordered>
        <Column
          title="推广计划名称"
          dataIndex="planName"
          key="planName"
          align="center"
        />
        <Column
          title="推广计划目的"
          dataIndex="purposeName"
          key="purposeName"
          align="center"
        />
        <Column
          title="状态"
          align="center"
          key='status'
          render={(item) => statusFn(item)}
        />
        <Column
          title="日预算"
          dataIndex="budgetDay"
          key="budgetDay"
          align="center"
          render={(budgetDay) => (
            <p>{budgetDay === 40000000 ? '不限' : budgetDay} </p>
          )}
        />
        <Column
          title="操作"
          align="center"
          key='handle'
          render={(item) => (
            <p>
              <span className='pointer' onClick={()=>edit(item.id)}>编辑 </span>
              <span className='pointer' onClick={()=>del(item.id,item.planName)}>删除</span>
            </p>
          )}
        />
      </Table>
      {/* 模板提示 */}
      <Modal title="提示" centered visible={modelStutas} onOk={handleOk} onCancel={()=>{setModelStatus(false)}} cancelText='取消' okText='确定'>
        <p>删除后的数据可以去状态已删除下查看，请确认是否删除该计划[]{planName}</p>
      </Modal>
    </div>
  );
}
